<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS v3 新特性全面解析 - 查聊</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 代码块样式 */
    pre {
      background-color: #f8fafc;
      border-radius: 0.5rem;
      padding: 1rem;
      overflow-x: auto;
      font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
      font-size: 0.875rem;
      line-height: 1.5;
    }
    
    /* 引用样式 */
    blockquote {
      border-left: 4px solid #4F46E5;
      padding-left: 1rem;
      color: #64748b;
      font-style: italic;
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
  <!-- PC端导航栏 -->
  <header class="hidden md:block fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </a>
      
      <!-- 搜索框 -->
      <div class="relative flex-1 max-w-xl mx-8">
        <input type="text" placeholder="搜索帖子、话题或用户..." 
               class="w-full pl-10 pr-4 py-2 rounded-full bg-light border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
          <i class="fa fa-search"></i>
        </span>
      </div>
      
      <!-- 导航链接 -->
      <nav class="flex items-center space-x-6">
        <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">发现</a>
        <a href="new-post.html" class="px-4 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors flex items-center space-x-1">
          <i class="fa fa-pencil"></i>
          <span>发帖</span>
        </a>
        <a href="profile.html" class="relative">
          <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm">
        </a>
      </nav>
    </div>
  </header>

  <!-- 移动端顶部导航 -->
  <header class="md:hidden fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="flex items-center justify-between p-4">
      <a href="index.html" class="text-gray-700">
        <i class="fa fa-arrow-left text-lg"></i>
      </a>
      <span class="font-medium text-gray-900">帖子详情</span>
      <button class="text-gray-700">
        <i class="fa fa-ellipsis-v text-lg"></i>
      </button>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 pt-24 pb-20 md:pt-28">
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧边栏 (PC端) -->
      <aside class="hidden lg:block w-64 shrink-0">
        <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
          <!-- 用户信息 -->
          <div class="flex items-center space-x-3 mb-6">
            <img src="https://picsum.photos/seed/user1/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary/20">
            <div>
              <h3 class="font-semibold text-gray-900">张三</h3>
              <p class="text-sm text-gray-500">@zhangsan</p>
            </div>
          </div>
          
          <!-- 导航菜单 -->
          <nav class="space-y-1">
            <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-home w-5 text-center"></i>
              <span>首页</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-compass w-5 text-center"></i>
              <span>发现</span>
            </a>
            <a href="favorites.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-star-o w-5 text-center"></i>
              <span>我的收藏</span>
              <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">5</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-bell-o w-5 text-center"></i>
              <span>通知</span>
              <span class="ml-auto bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">3</span>
            </a>
            <a href="profile.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-user-o w-5 text-center"></i>
              <span>个人中心</span>
            </a>
          </nav>
          
          <!-- 分割线 -->
          <div class="my-5 border-t border-gray-100"></div>
          
          <!-- 热门话题 -->
          <h4 class="font-semibold text-gray-700 mb-3">热门话题</h4>
          <div class="space-y-3">
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #前端开发
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #人工智能
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #生活方式
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #职场经验
            </a>
          </div>
        </div>
      </aside>

      <!-- 中间内容区 -->
      <div class="flex-1">
        <!-- 帖子内容 -->
        <article class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
          <!-- 帖子头部 -->
          <div class="p-5 flex items-center justify-between border-b border-gray-100">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/seed/user2/50/50" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
              <div>
                <h3 class="font-medium text-gray-900">李四</h3>
                <p class="text-xs text-gray-500">2小时前 · 技术讨论</p>
              </div>
            </div>
            <button class="px-4 py-1.5 text-sm bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
              关注
            </button>
          </div>
          
          <!-- 帖子主体 -->
          <div class="p-5">
            <h1 class="text-xl md:text-2xl font-bold mb-4 text-gray-900">Tailwind CSS v3 新特性全面解析</h1>
            
            <div class="prose max-w-none text-gray-700">
              <p class="mb-4">Tailwind CSS v3带来了许多令人兴奋的新特性，包括JIT编译模式、原生字体大小调整、颜色不透明度工具类等。本文将深入探讨这些新特性，并提供实用的代码示例，帮助你更好地利用Tailwind CSS提升开发效率。</p>
              
              <h2 class="text-lg font-semibold mt-6 mb-3">1. JIT编译模式</h2>
              <p class="mb-4">JIT（Just-In-Time）编译模式是Tailwind CSS v3最重要的更新之一。它只生成你实际使用的CSS类，大大减小了生成的CSS文件体积。</p>
              <pre class="mb-4">// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,ts,jsx,tsx}', './public/index.html'],
  // ...
}</pre>
              
              <h2 class="text-lg font-semibold mt-6 mb-3">2. 原生字体大小调整</h2>
              <p class="mb-4">Tailwind CSS v3引入了原生的字体大小调整工具类，可以更精确地控制文本大小。</p>
              <pre class="mb-4"><span class="text-gray-800">&lt;p class="text-[clamp(1rem,3vw,1.5rem)]"&gt;</span>
  响应式字体大小
<span class="text-gray-800">&lt;/p&gt;</span></pre>
              
              <!-- 帖子图片 -->
              <div class="rounded-lg overflow-hidden my-6">
                <img src="https://picsum.photos/seed/tailwind/800/400" alt="Tailwind CSS示例" class="w-full h-auto object-cover">
              </div>
              
              <h2 class="text-lg font-semibold mt-6 mb-3">3. 颜色不透明度工具类</h2>
              <p class="mb-4">现在可以直接在颜色类中指定不透明度，而不需要额外的opacity工具类。</p>
              <pre class="mb-4"><span class="text-gray-800">&lt;div class="bg-blue-500/20"&gt;</span>
  半透明背景
<span class="text-gray-800">&lt;/div&gt;</span></pre>
              
              <h2 class="text-lg font-semibold mt-6 mb-3">4. 改进的暗色模式支持</h2>
              <p class="mb-4">Tailwind CSS v3提供了更好的暗色模式支持，可以通过class或媒体查询来切换暗色模式。</p>
              <pre class="mb-4"><span class="text-gray-800">&lt;div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"&gt;</span>
  支持暗色模式的内容
<span class="text-gray-800">&lt;/div&gt;</span></pre>
              
              <h2 class="text-lg font-semibold mt-6 mb-3">5. 新的工具类</h2>
              <p class="mb-4">v3版本新增了许多实用的工具类，如aspect ratio、scroll snap等。</p>
              <pre class="mb-4"><span class="text-gray-800">&lt;div class="aspect-video"&gt;</span>
  16:9 比例的容器
<span class="text-gray-800">&lt;/div&gt;</span></pre>
              
              <blockquote class="my-6">
                Tailwind CSS v3的这些新特性使前端开发变得更加高效和灵活。如果你还没有尝试过，现在正是时候升级到最新版本！
              </blockquote>
            </div>
            
            <!-- 帖子标签 -->
            <div class="mt-6 flex flex-wrap gap-2">
              <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
                #前端开发
              </a>
              <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
                #TailwindCSS
              </a>
              <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
                #CSS
              </a>
            </div>
          </div>
          
          <!-- 互动区域 -->
          <div class="px-5 py-4 bg-gray-50 flex items-center justify-between border-t border-gray-100">
            <div class="flex items-center space-x-6">
              <button class="flex items-center space-x-1 text-gray-600 hover:text-red-500 transition-colors">
                <i class="fa fa-heart-o text-lg"></i>
                <span>128</span>
              </button>
              <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-comment-o text-lg"></i>
                <span>42</span>
              </button>
            </div>
            <div class="flex items-center space-x-6">
              <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-bookmark-o text-lg"></i>
              </button>
              <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-share-alt text-lg"></i>
              </button>
            </div>
          </div>
        </article>

        <!-- 评论区 -->
        <section class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
          <div class="p-5 border-b border-gray-100">
            <h2 class="font-bold text-gray-900">全部评论 (42)</h2>
          </div>
          
          <!-- 发表评论 -->
          <div class="p-5 border-b border-gray-100">
            <div class="flex space-x-3">
              <img src="https://picsum.photos/seed/user1/50/50" alt="用户头像" class="w-10 h-10 rounded-full object-cover shrink-0">
              <div class="flex-1">
                <textarea placeholder="分享你的想法..." class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none transition-all" rows="3"></textarea>
                <div class="mt-2 flex justify-end">
                  <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    发表评论
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 评论列表 -->
          <div class="divide-y divide-gray-100">
            <!-- 评论1 -->
            <div class="p-5">
              <div class="flex space-x-3">
                <img src="https://picsum.photos/seed/user3/50/50" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover shrink-0">
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-1">
                    <h3 class="font-medium text-gray-900">王五</h3>
                    <span class="text-xs text-gray-500">1小时前</span>
                  </div>
                  <p class="text-gray-700 mb-2">
                    非常详细的解析！我已经在几个项目中使用了Tailwind CSS v3，确实比之前的版本性能提升了很多，特别是在移动端的加载速度。
                  </p>
                  <div class="flex items-center space-x-4 text-sm text-gray-500">
                    <button class="hover:text-red-500 transition-colors">
                      <i class="fa fa-heart-o mr-1"></i> 32
                    </button>
                    <button class="hover:text-primary transition-colors">
                      <i class="fa fa-reply mr-1"></i> 回复
                    </button>
                  </div>
                  
                  <!-- 回复1 -->
                  <div class="mt-4 pl-4 border-l-2 border-gray-100">
                    <div class="flex space-x-2">
                      <img src="https://picsum.photos/seed/user2/50/50" alt="回复用户头像" class="w-8 h-8 rounded-full object-cover shrink-0">
                      <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                          <h4 class="font-medium text-gray-900 text-sm">李四 <span class="text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-1">作者</span></h4>
                          <span class="text-xs text-gray-500">45分钟前</span>
                        </div>
                        <p class="text-gray-700 text-sm mb-2">
                          是的，JIT模式确实带来了显著的性能提升，特别是对于大型项目。
                        </p>
                        <div class="flex items-center space-x-4 text-xs text-gray-500">
                          <button class="hover:text-red-500 transition-colors">
                            <i class="fa fa-heart-o mr-1"></i> 8
                          </button>
                          <button class="hover:text-primary transition-colors">
                            <i class="fa fa-reply mr-1"></i> 回复
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 评论2 -->
            <div class="p-5">
              <div class="flex space-x-3">
                <img src="https://picsum.photos/seed/user4/50/50" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover shrink-0">
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-1">
                    <h3 class="font-medium text-gray-900">赵六</h3>
                    <span class="text-xs text-gray-500">30分钟前</span>
                  </div>
                  <p class="text-gray-700 mb-2">
                    颜色不透明度工具类真的很方便，之前需要写两个类，现在只需要一个。希望后续版本能带来更多类似的便利功能。
                  </p>
                  <div class="flex items-center space-x-4 text-sm text-gray-500">
                    <button class="hover:text-red-500 transition-colors">
                      <i class="fa fa-heart-o mr-1"></i> 16
                    </button>
                    <button class="hover:text-primary transition-colors">
                      <i class="fa fa-reply mr-1"></i> 回复
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 评论3 -->
            <div class="p-5">
              <div class="flex space-x-3">
                <img src="https://picsum.photos/seed/user5/50/50" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover shrink-0">
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-1">
                    <h3 class="font-medium text-gray-900">陈七</h3>
                    <span class="text-xs text-gray-500">15分钟前</span>
                  </div>
                  <p class="text-gray-700 mb-2">
                    有没有人遇到过升级到v3后与某些插件不兼容的问题？我在使用一个自定义颜色插件时遇到了一些问题。
                  </p>
                  <div class="flex items-center space-x-4 text-sm text-gray-500">
                    <button class="hover:text-red-500 transition-colors">
                      <i class="fa fa-heart-o mr-1"></i> 4
                    </button>
                    <button class="hover:text-primary transition-colors">
                      <i class="fa fa-reply mr-1"></i> 回复
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多评论 -->
          <div class="text-center py-5">
            <button class="px-6 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              查看更多评论
            </button>
          </div>
        </section>
      </div>

      <!-- 右侧边栏 (PC端) -->
      <aside class="hidden lg:block w-72 shrink-0">
        <!-- 作者信息卡片 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <div class="flex flex-col items-center text-center">
            <img src="https://picsum.photos/seed/user2/100/100" alt="作者头像" class="w-20 h-20 rounded-full object-cover mb-3 border-4 border-primary/10">
            <h3 class="font-bold text-lg text-gray-900 mb-1">李四</h3>
            <p class="text-sm text-gray-500 mb-2">前端开发工程师 @ 科技公司</p>
            <p class="text-xs text-gray-600 mb-4">专注于现代前端技术和用户体验优化</p>
            <button class="w-full py-2 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors">
              关注作者
            </button>
          </div>
          
          <!-- 作者统计 -->
          <div class="mt-5 grid grid-cols-3 gap-2 text-center">
            <div>
              <p class="font-bold text-gray-900">28</p>
              <p class="text-xs text-gray-500">帖子</p>
            </div>
            <div>
              <p class="font-bold text-gray-900">1.2k</p>
              <p class="text-xs text-gray-500">粉丝</p>
            </div>
            <div>
              <p class="font-bold text-gray-900">56</p>
              <p class="text-xs text-gray-500">关注</p>
            </div>
          </div>
        </div>
        
        <!-- 相关推荐 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">相关推荐</h3>
          <div class="space-y-4">
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                如何在Vue项目中集成Tailwind CSS v3
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                186次浏览 · 24条评论
              </p>
            </a>
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                Tailwind CSS与CSS-in-JS的性能对比
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                215次浏览 · 32条评论
              </p>
            </a>
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                自定义Tailwind CSS主题的最佳实践
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                178次浏览 · 19条评论
              </p>
            </a>
          </div>
        </div>
        
        <!-- 广告横幅 -->
        <div class="bg-gradient-to-r from-primary to-purple-600 rounded-xl shadow-sm p-5 text-white">
          <h3 class="font-bold text-lg mb-2">加入查聊VIP</h3>
          <p class="text-sm text-white/80 mb-4">获取专属标识、无广告体验、优先客服等特权</p>
          <button class="w-full py-2 bg-white text-primary font-medium rounded-lg hover:bg-opacity-90 transition-colors">
            立即开通
          </button>
        </div>
      </aside>
    </div>
  </main>

  <!-- 移动端底部导航栏 -->
  <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-30">
    <div class="flex items-center justify-around h-16">
      <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
      </a>
      <a href="new-post.html" class="flex flex-col items-center justify-center">
        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center -mt-4 shadow-lg">
          <i class="fa fa-plus text-white text-xl"></i>
        </div>
      </a>
      <a href="favorites.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-star-o text-xl"></i>
        <span class="text-xs mt-1">收藏</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-user-o text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </nav>

  <!-- 移动端悬浮发布按钮 (在特定条件下显示) -->
  <div class="fixed bottom-20 right-4 md:hidden z-20 hidden" id="floating-new-post">
    <a href="new-post.html" class="w-14 h-14 bg-primary rounded-full flex items-center justify-center shadow-lg">
      <i class="fa fa-pencil text-white text-xl"></i>
    </a>
  </div>

  <!-- JavaScript -->
  <script>
    // 监听滚动显示/隐藏底部导航栏
    let lastScrollTop = 0;
    const mobileNav = document.querySelector('nav.fixed.bottom-0');
    const floatingButton = document.getElementById('floating-new-post');
    
    if (mobileNav) {
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop && scrollTop > 300) {
          // 向下滚动且超过300px
          mobileNav.classList.add('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.remove('hidden');
          }
        } else {
          // 向上滚动或未超过300px
          mobileNav.classList.remove('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.add('hidden');
          }
        }
        
        lastScrollTop = scrollTop;
      });
    }
    
    // 评论点赞功能
    const likeButtons = document.querySelectorAll('.fa-heart-o').forEach(button => {
      button.parentElement.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const count = this.querySelector('span');
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.add('text-red-500');
          this.classList.remove('hover:text-red-500');
          count.textContent = parseInt(count.textContent) + 1;
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('text-red-500');
          this.classList.add('hover:text-red-500');
          count.textContent = parseInt(count.textContent) - 1;
        }
      });
    });
  </script>
</body>
</html>